<template>
  <div class="home">
    <div style="position: fixed;top: 0;left: 0;z-index: 100;width: 100%;">
      <titleCustom :title="$route.meta.title"></titleCustom>
    </div>
    <van-tabs color="#2c91fc" offset-top="60" sticky title-active-color="#2c91fc" title-inactive-color="#333"
              @click="onClick">
      <van-tab title="按日期统计"></van-tab>
      <van-tab title="按月度统计">
      </van-tab>
    </van-tabs>

    <div class="searchClass">
      <van-field v-model="orgName" input-align="right" label="所属组织" name="所属组织"
                 placeholder="" readonly right-icon="arrow"
                 @click="handleSelect('orgId', 'orgName')" />

      <van-field v-if="index===0" v-model="startDate" input-align="right" label="开始日期" name="开始日期"
                 placeholder="请选择"
                 readonly right-icon="arrow" @click="handleSelectTime('startDate')" />
      <van-field v-if="index===0" v-model="endDate" input-align="right" label="结束日期" name="结束日期"
                 placeholder="请选择"
                 readonly right-icon="arrow" @click="handleSelectTime('endDate')" />
      <van-field v-if="index===1" v-model="month" input-align="right" label="统计月份" name="统计月份"
                 placeholder="请选择"
                 readonly right-icon="arrow" @click="handleSelectTime('month')" />
      <div style="padding: 5px 15px">
        <van-button block color="#3975c6" type="info" @click="searchData">确定</van-button>
      </div>
    </div>
    <div v-if="tableData && tableData.length != 0" class="tableData">
      <div class="tableDatabox">
        <table>
          <tr>
            <th>组织</th>
            <th>外呼总次数</th>
            <th>外呼客户数</th>
            <th>客户接听数</th>
            <th>客户未接听数</th>
            <th>坐席未接听数</th>
            <th>有效通话数</th>
            <th>通话总时长</th>
            <th>平均通话时长</th>
            <th>外呼接听率</th>
          </tr>
          <tbody v-if="tableData && tableData.length != 0">
          <tr v-for="(item, index) in tableData" :key="index">
            <td class="tab_item">{{ item.orgName }}</td>
            <td>{{ item.totalCount }}</td>
            <td>{{ item.calloutCount?item.calloutCount:0 }}</td>
            <td>{{ item.answeredCount }}</td>
            <td>{{ item.customerNoAnswerCount }}</td>
            <td>{{ item.clientNoAnswerCount }}</td>
            <td>{{ item.validCount }}</td>
            <td>{{ item.bridgeDuration }}</td>
            <td>{{ item.avgDuration }}</td>
            <td>{{ item.answeredRate + '%' }}</td>
          </tr>
          </tbody>

          <tr class="last_item">
            <td class="tab_item">{{ lastObj.totalName }}</td>
            <td>{{ lastObj.totalCount }}</td>
            <td>{{ lastObj.totalCallOutCount?lastObj.totalCallOutCount:0 }}</td>
            <td>{{ lastObj.answeredCount }}</td>
            <td>{{ lastObj.customerNoAnswerCount }}</td>
            <td>{{ lastObj.clientNoAnswerCount }}</td>
            <td>{{ lastObj.validCount }}</td>
            <td>{{ lastObj.bridgeDuration }}</td>
            <td>{{ lastObj.avgDuration }}</td>
            <td>{{ lastObj.answeredRate + '%' }}</td>

          </tr>
        </table>
      </div>

    </div>

    <van-popup v-model="showSelectPicker" position="bottom">

      <van-field v-model="likeWho" input-align="left" label="模糊查询" name="模糊查询"
                 placeholder="请输入模糊查询关键词" />
      <van-field-checkbox v-if="this.likeWhoField == 'orgId'" :columns="columns"
                          :option="{label:'name',value:'billId'}"
                          :select-value="selectValue"
                          @cancel="showSelectPicker = false" @confirm="handleSelectConfirm" />
    </van-popup>
    <van-popup v-model="showPickerDate" position="bottom">
      <van-datetime-picker v-model="currentDate" :formatter="index == 0?formatter:formatterMonth" :type="timeType"
                           @cancel="showPickerDate = false" @confirm="onConfirmDate" />
    </van-popup>
  </div>
</template>
<script>
import { Dialog, Notify, Toast } from 'vant'
import titleCustom from '@/components/titleCustom/title'
import commonApi from '@/api/commonApi'
import { getCurrentTime } from '../../utils/util'
import VanFieldSelectPicker from '../../components/selectPicker/index.vue'
import VanFieldCheckbox from '../../components/vanFieldCheckbox/index.vue'
import aiccApi from '../../api/aiccApi'

export default {
  components: {
    VanFieldCheckbox,
    VanFieldSelectPicker,
    titleCustom,
    Toast,
    Dialog,
    Notify
  },
  data() {
    return {
      index: 0,

      orgName: '',
      orgId: '',
      startDate: '',
      endDate: '',
      month: '',

      timeType: 'date',

      showSelectPicker: false,
      showPickerDate: false,
      currentDate: new Date(),
      columns: [],
      likeWho: '',
      likeWhoField: '',

      selectValue: [],
      tableData: [],

      lastObj: {}
    }
  },
  mounted() {
    this.getMainFixCenter()
    this.startDate = getCurrentTime()
    this.endDate = getCurrentTime()
    this.month = getCurrentTime().split('-')[0] + '-' + getCurrentTime().split('-')[1]
    this.searchData()
  },
  watch: {
    likeWho: function(nval, oval) {
      if (this.likeWhoField == 'orgId') {
        if (nval) {
          let newArr = this.fixCenterOptions.filter((item) => {
            return item.name.indexOf(nval) > -1
          })
          this.columns = newArr
        } else {
          this.columns = this.fixCenterOptions
        }
      }
    },
  },
  methods: {
    onClick(index) {
      this.index = index
      index === 0 ? this.timeType = 'date' : this.timeType = 'year-month'
      this.searchData()
    },
    // 选择下拉
    handleSelect(field, fieldName) {
      if (field == 'orgId') {
        this.showSelectPicker = true
        this.selectValue = this.orgId == '' ? [] : this.orgId.split(';')
        this.columns = this.fixCenterOptions
      }
      this.likeWhoField = field
    },

    // 选择下拉确认
    handleSelectConfirm(valueArr, objArr) {
      if (this.likeWhoField == 'orgId') {
        let orgIdArr = []
        let orgNameArr = []
        objArr.forEach((item) => {
          orgIdArr.push(item.billId)
          orgNameArr.push(item.name)
        })
        this.orgId = orgIdArr.join(';')
        this.orgName = orgNameArr.join('、')
      }
      this.likeWhoField = ''
      this.showSelectPicker = false
    },
    // 时间筛选
    handleSelectTime(name) {
      if (this.tabindex == 0) {
        return
      }
      this.timeField = name
      this.showPickerDate = true
    },
    // 时间确认
    onConfirmDate() {
      if (this.timeField == 'month') {
        this[this.timeField] = `${this.value1}-${this.value2}`
      } else {
        this[this.timeField] = `${this.value1}-${this.value2}-${this.value3}` // 字符串拼接 结果入2020-07-03
      }
      this.showPickerDate = false
    },
    // 日期组件自定义格式
    formatter(type, value) {
      if (type === 'year') {
        this.value1 = value // 可以拿到当前点击的数值
        return `${value}年`
      } else if (type === 'month') {
        this.value2 = value
        return `${value}月`
      }
      this.value3 = value
      return `${value}日`
    },
    formatterMonth(type, value) {
      if (type === 'year') {
        this.value1 = value // 可以拿到当前点击的数值
        return `${value}年`
      } else if (type === 'month') {
        this.value2 = value
        return `${value}月`
      }
    },

    // 获取维修中心
    getMainFixCenter() {
      commonApi
        .getMainFixCenter({
          type: ''
        })
        .then((res) => {
          if (res.data) {
            this.fixCenterOptions = res.data
          }
        })
    },
    searchData() {
      this.tableData.length = 0
      this.lastObj = {}
      let params = {
        type: this.index === 0 ? 'day' : 'month',
        // userId: getCookies('userId'),
        org_id: this.orgId,
        startDate: this.startDate,
        endDate: this.endDate,
        month: this.month
      }
      aiccApi.getOrgIdOutSeatsCallCount(params).then((res) => {
        if (res.data && res.data.length !== 0) {
          this.tableData = res.data
          this.lastObj = res.totalData
        }
      })
    },
    onClickLeft() {
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="less" scoped="">
.home {
  background-color: #f2f2f2;
  //font-family: 'Alibaba';
  /* height: calc(100vh - 60px); */
  width: 100%;
  font-size: 14px;
  padding-top: 60px;
}

.searchClass {
  //position: fixed;
  //top: 104px;
  padding-top: 5px;
  left: 0;
  z-index: 100;
  width: 100%;
  //height: 70px;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.05);
  background-color: #f2f2f2;
}

.tableData {
  margin-top: 10px;
  //margin: 0 16px;
  // height: 500px;
  border-collapse: collapse;
  text-align: center;
  // height: auto; /* 自动计算高度 */
  border-radius: 5px;
  overflow-x: hidden;

  .tableDatabox {
    overflow-x: scroll;
  }

  table {
    min-width: 800px;
    font-size: 0.24rem;
    border: none;
    width: 100%;
  }

  .last_item td {
    font-weight: bold;
  }

  .tab_item {
    background: #f1f1f1;
  }

  tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #3975c6;

    color: #fff;
  }

  tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #3975c6;
    color: #fff;
  }

  tr {
    th {
      position: sticky; /* 将表头固定在位置 */
      top: 0; /* 与容器顶部对齐 */
      font-size: 12px;
      border: 1px solid #fff;
      padding: 0.2rem 0;
      background: #3975c6;
      color: #fff;
      font-weight: bold;
    }

    td {
      padding: 0.1rem 0;
      border: 1px solid #f1f1f1;
      color: #333;
      font-size: 12px;
    }
  }
}

@media screen and (min-width: 375px) {
  .tableData {
    table {
      // min-width: 100%;
    }
  }
}

</style>
